<%--
  Created by IntelliJ IDEA.
  User: 饿熊的咆哮
  Date: 2021/10/15
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>申请退款</title>
    <link rel="icon" href="http://47.100.102.177:8080/app/images/common/云上书屋.png" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/nav.css" />
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/foot.css">
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/bootstrap.css">
    <script src="http://47.100.102.177:8080/app/js/common/jquery.min.js"></script>
    <script type="text/javascript" src="http://47.100.102.177:8080/app/js/common/bootstrap.min.js"></script>
    <script src="http://47.100.102.177:8080/app/js/common/jquery-1.12.4.js"></script>
    <script src="../../boot/plugin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">

    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../../boot/plugin/element/vue.js"></script>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../boot/plugin/element/element.css">
    <!-- 引入element 的组件库-->
    <script src="../../boot/plugin/element/element.js"></script>
    <style>
        #app{
            width: 100%;
        }
        .body{
            padding: 50px 200px;
            width: 100%;
            position: relative;
            top:50px;
        }
    </style>
</head>
<body>
<div id="app" style="position: absolute;">
    <div class='nav'>
        <ul>
            <li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
            <li><a href='../index01'>主页</a></li>
            <li><a href='#'>分类</a>
                <ul>
                    <li><a href='../index01'>图书</a></li>
                    <li><a href='../index02'>电子书</a></li>
                </ul>
            </li>
            <book:if test="${user!=null}">
                <li><a href='#'>${user.uname}</a>
                    <ul>
                        <li><a href='../car/shoppingcar?account=${user.account}'>购物车</a></li>
                        <li><a href='../personal/center?status=1'>个人信息</a></li>
                        <li><a href='../order/order'>订单信息</a></li>
                    </ul>
                </li>
                <li><a href="/boot/users/exit">安全退出</a></li>
            </book:if>
            <li><a href='../login'>登陆</a></li>
            <li><a href='../login'>注册</a></li>
        </ul>
    </div>

    <div class="body">
        <h2>退款申请</h2>
        <hr>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="当前账户">
                <span id="people_add">${people.peopleId}</span>
            </el-form-item>
            <el-form-item label="细明id">
                <span id="orderListId_add">${param.orderListId}</span>
            </el-form-item>
            <el-form-item label="当前时间">
                <span id="time_add"></span>
            </el-form-item>

            <el-form-item label="退款原因">
                <el-input id="back_add" type="textarea" v-model="form.back"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" onclick="addBack()">申请退款</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="foot">
        <!-- 多快好省start -->
        <div class="dkhs">
            <ul>
                <li>
                    <div class="duo"></div>
                    <p>品类齐全，轻松购物</p>
                </li>
                <li>
                    <div class="kuai"></div>
                    <p>多仓直发，急速配送</p>
                </li>
                <li>
                    <div class="hao"></div>
                    <p>正平行货，精致服务</p>
                </li>
                <li>
                    <div class="sheng"></div>
                    <p>天天低价，畅选无忧</p>
                </li>
            </ul>
        </div>
        <!-- 多快好省end -->

        <!-- 结尾start -->
        <div class="jiewei">
            <div class="j1">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">English</a></li>
                    <li class="line"></li>
                    <li><a href="#">Site</a></li>
                    <li class="line"></li>
                    <li><a href="#">Media & IR</a></li>
                    <li class="line"></li>
                </ul>
            </div>
            <div class="j2">
                <p>云上书屋收录的免费书籍作品、频道内容、书友评论、胪上文字图片等其他切内容及在云上书屋所做之广告均属用户个人行为,与本网站无关。</p>
            </div>
            <div class="j3">
                <ul>
                    <li class="l1"><a href="#"></a></li>
                    <li class="l2"><a href="#"></a></li>
                    <li class="l3"><a href="#"></a></li>
                    <li class="l4"><a href="#"></a></li>
                    <li class="l5"><a href="#"></a></li>
                    <li class="l6"><a href="#"></a></li>
                </ul>
            </div>
        </div>
        <!-- 结尾end -->
    </div>
</div>
</body>
<script>
    var Main = {
        data() {
            return {
                form: {
                }
            }
        },
        methods: {
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    function addBack(){
        let peopleId = ${people.peopleId};
        let orderListId = getQueryVariable("orderListId");
        let backTime = document.getElementById("time_add").innerText;
        let backReason = document.getElementById("back_add").value;
        $.post("/boot/back/addBack",{peopleId:peopleId,orderListId:orderListId,backTime:backTime,backReason:backReason},function (res){
            if (res.code=="200"){
                // alert(res.msg);
                layer.msg("提交成功");
                window.location.href="/boot/order/order";
            }
        })
    }


    //获取当前时间以字符串形式显示在span标签内
    //  2020/10/15 15:08:10
    function loadTime() {
        var currentDate = new Date();
        var dateStr = formatDate(currentDate);
        var time_add = document.getElementById("time_add");
        time_add.innerHTML = dateStr;
    }
    //日期对象 转换为 指定日期格式的字符串 yyyy/MM/dd HH:mm:ss
    function formatDate(date) {
        var str = date.getFullYear() + "/" + subDate((date.getMonth() + 1)) + "/" +
            subDate(date.getDate()) + " " + subDate(date.getHours()) + ":" +
            subDate(date.getMinutes()) + ":" + subDate(date.getSeconds());
        return str;
    }
    //补全日期 不足两位前面补0  5--05 10--10
    //先统一前面加0  05  010
    function subDate(s) {
        var s1 = "0" + s;
        return s1.substring(s1.length - 2);
    }

    onload = function() {
        //每隔1秒 执行loadTime方法
        setInterval(loadTime, 1000);
    };


    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

</script>
</html>

